<template>
    <ScalablePage>
        <template #default="{ scale }">

            <div class="resolution">
                <!-- 标题 -->
                <FirstLevelTitle text="巡检管理"></FirstLevelTitle>
                <!-- 巡检计划 -->
                <secondary-title text="巡检记录" more="更多>>>"></secondary-title>
                <div class="top-style">
                    <!-- 巡检记录 -->
                    <div class="manage">
                        <div class="scroll-title">
                            <!-- <img style="flex: 1; width: 36px; margin-right: 2px;" src="@/assets/images/right/you4.png"
                                alt="" />
                            <img style="width: 137px;" src="@/assets/images/right/you6.png" alt="" /> -->
                            <div class="scroll-title-messages messages-xuhao">序号</div>
                            <div class="scroll-title-messages messages-name">
                                任务名称</div>
                            <div class="scroll-title-messages messages-startTime">
                                任务开始时间</div>
                            <div class="scroll-title-messages messages-endTime">
                                任务结束时间</div>
                            <div class="scroll-title-messages messages-status">
                                任务状态</div>
                            <div class="scroll-title-messages messages-result">
                                巡检结果</div>
                        </div>
                        <div class="scroll-table" style="height: 90px; margin-top: 10px">
                            <table class="device-report-table" style="font-size: 11px;">
                                <tbody>
                                    <tr v-for="(itm, indx) in xujianJilu" :key="indx">
                                        <td class="serial-number-1" style="width: 25px">NO.{{ indx + 1 }}</td>
                                        <td class="plan-name-2" style="width: 88px">{{ itm.taskName }}</td>
                                        <td class="plan-name-2" style="width: 65px">{{ itm.taskStartTime }}</td>
                                        <td class="plan-name-2" style="width: 65px">{{ itm.taskEndTime ? itm.taskEndTime
                                            : '—' }}</td>
                                        <td class="plan-name-2" style="width: 33px">{{ itm.taskState_dictText }}</td>
                                        <td class="plan-name-2" style="width: 33px">{{ itm.isException === 'false' ?
                                            '正常' : '异常' }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- 安全管理 -->
                <FirstLevelTitle text="安全管理"></FirstLevelTitle>
                <!-- 安全隐患 -->
                <div class="top-style">
                    <div style="width: 200px">
                        <secondary-title text="安全隐患" more="更多>>>"></secondary-title>
                    </div>
                    <div style="width: 200px">
                        <secondary-title text="安全隐患管理"></secondary-title>
                    </div>
                </div>

                <div style="display: flex" class="marginTop">
                    <div class="style2 style2-bg" style="width: 160px;">
                        <div class="style2-bg-1">
                            安全隐患总数<span class="style2-bg-span">&ensp;{{ fenxi.total }}&ensp;</span>个
                        </div>
                        <div class="style2-bg-2">
                            环比上月 <br /><span class="style2-bg-span">
                                {{ fenxi.countChain }}
                            </span>个
                        </div>
                        <div class="style2-bg-3">
                            同比去年<br /><span class="style2-bg-span">{{ fenxi.countYearOverYear }}</span>个
                        </div>
                    </div>

                    <div class="manage" style="margin-left: 31px">
                        <div class="scroll-title" style="font-size: 11px;">
                            <div style="flex: 1; width: 90px;">隐患部位</div>
                            <div style="width: 100px">安全等级</div>
                            <div style="width: 100px">隐患原因</div>
                        </div>
                        <div class="scroll-table" style="height: 77px; margin-top: 10px;">
                            <table class="device-report-table" style="font-size: 11px;">
                                <tbody>
                                    <tr v-for="(itm, index) in yinhuanList">
                                        <td class="serial-number-2" style="width: 90px;">{{ itm.recOrdBody_dictText }}
                                        </td>
                                        <td class="plan-name-2" style="width: 110px">{{ itm.recOrdLevel_dictText }}</td>
                                        <td class="plan-name-2">{{ itm.recOrdClassify_dictText }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="marginTop">
                    <secondary-title text="雨量监测"></secondary-title>
                </div>
                <div class="marginTop">
                    <!-- <img style="width: 100%;" src="@/assets/images/right/you19.png" alt="" /> -->
                    <!-- <Discounting :scale="scale" /> -->
                    <xj1righteEcharts :scale="scale"></xj1righteEcharts>
                </div>
            </div>
        </template>
    </ScalablePage>
</template>
<script setup lang="ts">
// 折现统计图组件
import xj1righteEcharts from './components/xj1right-echarts.vue';
import Discounting from './components/discounting.vue';
import { onMounted, reactive, toRefs, ref } from "vue";
import ScalablePage from '@/components/ScalablePage.vue'; // 引入组件

const state = reactive({
    xujianJihua: [],
    xujianJilu: [],
    yinhuanList: [],
    fenxi: {
        countChain: 0,
        countYearOverYear: 0,
        total: 0
    }
});

let { xujianJilu, xujianJihua, yinhuanList, fenxi } = toRefs(state);

onMounted(() => {
    xuJianJiHua();
    xuJianJiLu();
    anquanYinHuanList();
    anquanFenXi();
    // shexiangtou()
});

function shexiangtou() {
    const videoElement1 = document.getElementById('media1') as HTMLVideoElement;
    videoElement1.src = 'http://111.113.0.230:5000/video_stream?rtsp_address=rtsp://admin:CCSW1234@192.168.100.34:554/Streaming/Channels/101';

    const videoElement2 = document.getElementById('media2') as HTMLVideoElement;
    videoElement2.src = 'http://111.113.0.230:5000/video_stream?rtsp_address=rtsp://admin:CCSW1234@192.168.100.43:554/Streaming/Channels/101';

    const videoElement3 = document.getElementById('media3') as HTMLVideoElement;
    videoElement3.src = 'http://111.113.0.230:5000/video_stream?rtsp_address=rtsp://admin:a12345678@192.168.100.54:554/Streaming/Channels/101';

    const videoElement4 = document.getElementById('media4') as HTMLVideoElement;
    videoElement4.src = 'http://111.113.0.230:5000/video_stream?rtsp_address=rtsp://admin:a12345678@192.168.100.60:554/Streaming/Channels/101';

}


function getLastMonthStart(date: any) {
    const d = new Date(date);
    const year = d.getUTCFullYear();
    const month = d.getUTCMonth();
    const day = d.getUTCDate();

    let targetYear = year;
    let targetMonth = month - 1;
    if (targetMonth < 0) {
        targetYear--;
        targetMonth = 11;
    }

    const targetDate = new Date(Date.UTC(targetYear, targetMonth, day));
    if (targetDate.getUTCMonth() !== targetMonth) {
        targetDate.setUTCDate(0);
    }

    const y = targetDate.getUTCFullYear();
    const m = String(targetDate.getUTCMonth() + 1).padStart(2, '0');
    const dd = String(targetDate.getUTCDate()).padStart(2, '0');
    return `${y}-${m}-${dd}`;
}

// 示例用法
const today = new Date(); // 假设今天是2025-04-07
const startTime = getLastMonthStart(today);


function xuJianJiHua() {
    fetch("http://111.113.0.230:8066/orca/web/inspection/inspectionPlan/list")
        .then((r) => {
            if (r.status === 200) {
                return r.json();
            } else {
                return Promise.reject(r.json());
            }
        })
        .then((res) => {
            state.xujianJihua = res.result.records;
        });
}

// function xuJianJiLu() {
//     fetch("http://111.113.0.230:8066/orca/web/inspection/inspectionTask/list")
//         .then((r) => {
//             if (r.status === 200) {
//                 return r.json();
//             } else {
//                 return Promise.reject(r.json());
//             }
//         })
//         .then((res) => {
//             state.xujianJilu = res.result.records;
//         });
// }



function xuJianJiLu() {
    fetch("http://111.113.0.230:8066/orca/web/inspection/inspectionTask/list")
        .then((r) => {
            if (r.status === 200) {
                return r.json();
            } else {
                return Promise.reject(r.json());
            }
        })
        .then((res) => {
            state.xujianJilu = res.result.records;
        });
}



function anquanYinHuanList() {
    fetch("http://111.113.0.230:8066/orca/ajh/ajhRectificationInfo/list")
        .then((r) => {
            if (r.status === 200) {
                return r.json();
            } else {
                return Promise.reject(r.json());
            }
        })
        .then((res) => {
            state.yinhuanList = res.result.records;
        });
}
function anquanFenXi() {
    let reg = {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            startDate: "2025-02-01 00:00:00",
            endDate: "2025-02-28 23:59:59",
            queryType: "1",
        }),
    };
    fetch("http://111.113.0.230:8066/orca/ajh/ajhRectificationInfo/analyse", reg)
        .then((r) => {
            if (r.status === 200) {
                return r.json();
            } else {
                return Promise.reject(r.json());
            }
        })
        .then((res) => {
            state.fenxi.countChain = res.result.countChain;
            let arr = res.result.countHistogramList
            let num = 0;
            for (let i = 0; i < arr.length; i++) {
                num += arr[i].handleCount
                num += arr[i].unhandleCount
            }
            state.fenxi.countYearOverYear = res.result.countYearOverYear;
            state.fenxi.total = num
        });
    // function getRandomNumber(type: 'positiveNum' | 'negativeNum') {
    //     if (type === 'negativeNum') {
    //         return -Math.floor(Math.random() * 5) - 1;
    //     } else if (type === 'positiveNum') {
    //         return Math.floor(Math.random() * 10) + 1;
    //     } else {
    //         throw new Error('参数必须是 "negativeNum" 或 "positiveNum"');
    //     }
    // }
    // state.fenxi.total = getRandomNumber('positiveNum')
    // state.fenxi.countYearOverYear = getRandomNumber('negativeNum');
}

</script>
<style src="../../../common.css" />
<style src="./index2.less" />
<style src="./right.less" />
<style scoped lang="less">
@import '@/assets/common/font.css';

.click-css {
    position: relative;
}

.click-css::before {
    position: absolute;
    width: 70px;
    border-bottom: 1px solid blue;
    content: "";
    bottom: 0;
}

.w::before {
    position: absolute;
    width: 100px;
    border-bottom: 1px solid blue;
    content: "";
    bottom: 0;
}

.scroll-title-messages {
    height: 20px;
    text-align: center;
    padding: 0;
    line-height: 20px;
    margin-right: 2px;
    background-color: #0d497f42;
    font-size: 10px;
}

.messages-xuhao {
    width: 42px;
}

.messages-name {
    width: 128px;
}

.messages-startTime {
    width: 98px;
}

.messages-endTime {
    width: 98px;
}

.messages-status {
    width: 50px;
}

.messages-result {
    width: 50px;
}
</style>